<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>高等学校毕业生登记表</title>
    <meta name="approvalStatus" th:content="${approvalStatus}">
    <meta name="approvalRemark" th:content="${approvalRemark}">
    <meta name="outsideType" th:content="${outsideType}">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100%;
            box-sizing: border-box;
            font-family: 'SimSun', sans-serif;
            font-size: 19px;
        }
        .htStyle {
            padding: 0 160px
        }
        .heightStyle {
            /*height: 200px*/
        }
        .imageStyle2 {
            width:150px;
            /*height: 200px;*/
        }
        .imageStyle {
            width: 190px;
            height: 140px;
        }
        .button-container {
            display: flex;
            justify-content: flex-end; /* 右对齐 */
        }
        /* 全局滚动条样式（适配图片风格） */
        ::-webkit-scrollbar {
            width: 8px;                  /* 调整为更纤细的浅灰条 */
            background: transparent;     /* 轨道透明以融入背景 */
        }

        ::-webkit-scrollbar-thumb {
            background: #dee2e6;          /* 浅灰与表格边框同色 */
            border: 2px solid #ffffff;    /* 白边增强对比 */
            border-radius: 4px;           /* 圆角与表格按钮统一 */
            transition: all 0.3s ease;
        }

        /* 悬停状态（保留原功能提示） */
        ::-webkit-scrollbar-thumb:hover {
            background: #ced4da;          /* 加深10%的灰色 */
            transform: scaleX(1.1);
        }

        /* 激活状态（呼应黄按钮） */
        ::-webkit-scrollbar-thumb:active {
            background: #ffd43b;          /* 黄色与预览按钮呼应 */
        }

        /* Firefox兼容方案 */
        * {
            scrollbar-width: thin;
            scrollbar-color: #dee2e6 #fff; /* 浅灰滑块+白色轨道 */
        }
        .borderStyle {
            border-left: 2px solid #000 !important;
        }
        .borderBotton {
            border-bottom: 2px solid #000 !important;
        }
        .sizeStyle {
            text-align: center;
            font-size: 26px;
            letter-spacing: 2px;
            font-weight: 600;
        }
        .spacing-table {
            border-collapse: separate;   /* 必须设为 separate */
            border-spacing: 0;          /* 单元格间距归零 */
            border: none;
        }

        /* 精准控制边框 */
        .spacing-table td,
        .spacing-table th {
            border-bottom: none;
            border-left: none;
        }
        .textStyle {
            margin: auto;
            width: 60%;
            margin-top: 10px;
            line-height: 30px
        }

        /* 隐藏最后一个行的底部边框 */
        .spacing-table tr:last-child td,
        .spacing-table tr:last-child th {
            border-bottom: none;
        }
        #box {
            width: 100%;
            min-width: 800px;
            transform: scale(0.9);
            transform-origin: top center;
        }

        table {
            border: 1px solid #000;
            border-collapse: collapse;
            width: 100%;
            margin: auto;
            table-layout: fixed;
        }

        th,
        td {
            padding: 12px 10px;
            word-break: break-all;
            border: 2px solid #000;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
        }

        span {
            padding: 0 5px;
        }


        @media print {
            body {
                transform: scale(1);
                min-width: auto;
            }
            #box {
                min-width: auto;
                transform: none;
            }
            #printButton {
                display: none; /* 确保打印时不显示 */
            }
        }
        .authStyle {
            display: flex;
            gap: 20px;
            width: 100%;
            margin: auto;
        }
        .leftStyle {
            margin-left: 150px;
        }
        .leftStyle p{
           line-height: 25px;
        }
        .topStyle {
            margin-top: 20px;
        }
        .leftStyle .colorStyle{
            margin-left:40%;
            font-size: 19px;
            font-weight: 600;
            letter-spacing: 4px
        }
        .boxStyle {
            gap: 180px;
        }
        .colorStyle1 {
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 4px;
            margin-left: 10px;
        }
        .marginStyle {
            margin: 190px 0 0 100px;
        }
        .inlineStyle {
            display: inline-block;
            width: 200px;
            border-bottom: 1px solid #000
        }

        .widthStyle {
            width: 70px
        }
        .topSt {
            margin-top: 40px
        }
    </style>
</head>

<body>
<div id="box">
    <div class="authStyle boxStyle">
        <!-- 填表说明 -->
        <div style="flex: 1;" class="leftStyle">
            <p class="colorStyle">填表说明</p>
            <p>1.毕业生必须实事求是填写本表，填写时一律用钢笔或碳素笔，字迹要清楚。</p>
            <p>2.表内所列项目，要全部填写，不留空白。如有情况不明无法填写时，应写“不清”、“不详”及其原因，如无该项情况，亦应写“无”。</p>
            <p>3.“本人简历”自入小学时起，依时间顺序详细填写，年、月要衔接。中途间断学习和工作时间也要填入，并加说明。</p>
            <p>4.“家庭主要成员”是指直系亲属（父母和爱人、子女）。“主要社会关系”是指对本人影响较大、关系密切的亲友。</p>
            <p>5.“健康状况”主要填写有无疾病和体质强弱状况。</p>
            <p>6.贴最近一寸正面半身脱帽照片。</p>
            <p>7.如有其它问题，需要说明时，可另纸附上。</p>
        </div>

        <!-- 登记表 -->
        <div style="flex: 1;" class="marginStyle">
            <p class="colorStyle1">高等学校毕业生登记表</p>
            <p style="font-weight: 600;" class="topSt">学&ensp;&ensp;校：<span class="inlineStyle">吉林师范大学</span></p>
            <p style="font-weight: 600">学&ensp;&ensp;制：<span class="inlineStyle" th:text="${educationSystem}"></span></p>
            <p style="font-weight: 600">系&ensp;&ensp;科：<span class="inlineStyle" th:text="${department}"></span></p>
            <p style="font-weight: 600">专&ensp;&ensp;业：<span class="inlineStyle" th:text="${academicMajor}"></span></p>
            <p style="font-weight: 600">姓&ensp;&ensp;名：<span class="inlineStyle" th:text="${name}"></span></p>
        </div>
    </div>
    <h1 class="sizeStyle">高等学校毕业生登记表</h1>

    <div class="authStyle">
        <div>
            <table class="spacing-table" style="margin-top: 20px">
                <!-- 左侧原始列 -->
                <tr>

                    <th style="width: 17%" class="borderStyle">性&ensp;&ensp;&ensp;&ensp;名</th>
                    <td th:text="${name}" style="width: 22%"></td>
                    <th style="width: 17%">性&ensp;&ensp;&ensp;&ensp;别</th>
                    <td th:text="${gender}" style="width: 22%"></td>
                    <th style="width: 17%;">出生年月</th>
                    <td th:text="${birthDate}" style="width: 22%;"></td>

                    <th rowspan="6" style="vertical-align: middle;width: 24%">
                        <!-- 有照片时显示图片 -->
                        <div class="button-container" th:if="${photo}">
                            <img
                                    class="imageStyle2"
                                    th:if="${photo}"
                                    th:src="${photo}"
                                    style="width:100%;vertical-align:middle;"
                                    alt="证件照"
                            >
                        </div>
                        <!-- 无照片时显示文字 -->
                        <span th:unless="${photo}">2寸照片</span></th>
                </tr>

                <tr>
                    <th style="width: 18%" class="borderStyle">政治面貌</th>
                    <td th:text="${politicalAffiliation}" style="width: 26%"></td>
                    <th style="width: 18%">民&ensp;&ensp;&ensp;&ensp;族</th>
                    <td th:text="${ethnicity}" style="width: 26%"></td>
                    <th style="width: 18%">健康情况</th>
                    <td th:text="${healthStatus}" style="width: 26%"></td>
                </tr>

                <tr>
                    <th style="width: 26%;" class="borderStyle">籍&ensp;&ensp;&ensp;&ensp;贯</th>
                    <td  colspan="2" th:text="${hometown}"></td>



                    <th style="width: 26%;">学位情况</th>
                    <td  colspan="2" th:text="${learningSituation}"></td>

                </tr>

                <tr>

                    <th style="width: 26%;" class="borderStyle">家庭住址</th>
                    <td colspan="2" th:text="${familyDetailedAddress}"></td>

                    <th style="width: 26%;">外语及水平</th>
                    <td colspan="2" th:text="${'foreignLanguage'}"></td>
                </tr>



            </table>


            <table class="spacing-table">
                <tr>
                    <th rowspan="6" style="width: 9.2%;writing-mode: vertical-rl;" class="borderStyle">个人简历</th>
                </tr>

                <tr th:each="resume, iterStat : ${resumeInfo}">
                    <th style="width: 19%;" class="heightStyle"
                        th:text="${resume.personalResume1StartDate} ?: '&ensp;'"></th>
                    <th style="width: 19%;"
                        th:text="${resume.personalResume1Institution} ?: '&ensp;'"></th>
                    <th style="width: 19%;"
                        th:text="${resume.certifier} ?: '&ensp;'"></th>
                </tr>
            </table>


            <table class="spacing-table borderBotton">
                <tr>
                    <th rowspan="6" style="width: 9%;writing-mode: vertical-rl;" class="borderStyle borderBotton">家庭及主要成员及社会关系</th>
                </tr>
                <tr>
                    <th style="width: 19%;">与本人关系</th>
                    <th style="width: 19%;">姓名</th>
                    <th style="width: 19%;">工作单位</th>
                </tr>
                <tr th:each="member, iterStat : ${familyInfo}">
                    <th style="width: 19%;"
                        th:text="${member.familyMember1Relationship} ?: '&ensp;'"></th>
                    <th style="width: 19%;"
                        th:text="${member.familyMember1Name} ?: '&ensp;'"></th>
                    <th style="width: 19%;"
                        th:text="${member.familyMember1WorkUnit} ?: '&ensp;'"></th>

                </tr>

            </table>

        </div>


        <div style="margin-top: 18px">
            <table class="spacing-table">
                <tr>

                    <td style="writing-mode: vertical-rl;" class="borderStyle widthStyle">毕业生实习及论文（设计）</td>
                    <td style="text-align: left;">
                        <div style="text-indent: 2em;">
                            <p class="topStyle" style="line-height: 26px;margin-top: 8px;letter-spacing: 2px;">
                                1、实 习 单 位：<span th:if="${practiceUnit}" class="inlineStyle"></span>
                            </p>
                            <p class="topStyle" style="line-height: 26px;letter-spacing: 2px;">
                                2、实 习 内 容：<span th:if="${learningContent}" class="inlineStyle"></span>
                            </p>
                            <p class="topStyle" style="line-height: 26px;letter-spacing: 2px;">
                                3、论 文 题 目：<span th:if="${thesisTitle}" class="inlineStyle"></span>
                            </p>
                            <p class="topStyle" style="line-height: 26px;letter-spacing: 2px;">
                                4、毕 业 设 计：<span th:if="${graduationDesign}" class="inlineStyle"></span>
                            </p>
                            <p class="topStyle" style="line-height: 26px;letter-spacing: 2px;">
                                5、其 　 　 他：
                            </p>

                        </div>
                    </td>
                </tr>
            </table>


            <table class="spacing-table">
                <tr>
                    <td style="writing-mode: vertical-rl;" class="borderStyle widthStyle">奖惩信息</td>
                    <td style="text-align: left;">
                        <div style="text-indent: 2em;">
                            <p th:each="rewards, iterStat : ${rewardsInfo}" style="line-height: 26px;letter-spacing: 2px;margin: 0">

                                <span style="width: 19%;"
                                      th:text="${rewards.columnName} ?: '&ensp;'"></span>
                                <span style="width: 19%;"
                                      th:text="${rewards.content} ?: '&ensp;'"></span>
                            </p>
                            <div class="button-container" th:if="${studentUrl}">
                                <img class="imageStyle" th:src="${studentUrl}"  alt="">
                            </div>
                            <div th:unless="${studentUrl}">
                                <p style="justify-content: space-between; text-align: right;margin-right: 55px">
                                    <span>签字：</span>
                                </p>

                                <p style="text-align: right;margin-right: 15px;margin: 0"><span th:text="${returnYear}"></span>年<span th:text="${returnMonth}"></span>&ensp;&ensp;月<span th:text="${returnDay}"></span>&ensp;&ensp;日</p>

                            </div>
                        </div>
                    </td>
                </tr>
            </table>

            <table class="spacing-table">
                <tr>
                    <td style="writing-mode: vertical-rl;" class="borderStyle widthStyle">个人鉴定</td>
                    <td style="text-align: left;">
                        <div style="text-indent: 2em;">
                            <p style="line-height: 26px;letter-spacing: 2px;margin: 0">
                            <span style="width: 19%;"
                                  th:text="${personalEvaluation} ?: '&ensp;'"></span>
                            </p>
                            <div class="button-container" th:if="${studentUrl}">
                                <img class="imageStyle" th:src="${studentUrl}"  alt="">
                            </div>
                            <div th:unless="${studentUrl}">
                                <p style="justify-content: space-between; text-align: right;margin-right: 55px">
                                    <span>签字：</span>
                                </p>

                                <p style="text-align: right;margin-right: 15px;margin: 0"><span th:text="${returnYear}"></span>年<span th:text="${returnMonth}"></span>&ensp;&ensp;月<span th:text="${returnDay}"></span>&ensp;&ensp;日</p>

                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <table class="spacing-table">
                <tr>
                    <td style="writing-mode: vertical-rl;" class="borderStyle widthStyle">班级鉴定</td>
                    <td style="text-align: left;">
                        <div style="text-indent: 2em;">
                            <p style="line-height: 26px;letter-spacing: 2px;margin: 0">
                                <span style="width: 19%;"></span>
                            </p>
                            <div class="button-container" th:if="${''}">
<!--                                <img class="imageStyle" th:src="${''}"  alt="">-->
                            </div>
                            <div th:unless="${studentUrl}">
                                <p style="justify-content: space-between; text-align: right;margin-right: 55px">
                                    <span>签字：</span>
                                </p>

                                <p style="text-align: right;margin-right: 15px;margin: 0"><span th:text="${returnYear}"></span>年<span th:text="${returnMonth}"></span>&ensp;&ensp;月<span th:text="${returnDay}"></span>&ensp;&ensp;日</p>

                            </div>
                        </div>
                    </td>
                </tr>
            </table>


            <table class="spacing-table">
                <tr>
                    <td style="width: 9%; writing-mode: vertical-rl;" class="borderStyle borderBotton">学校意见</td>
                    <td style="text-align: left;" class="borderBotton">
                        <div style="text-indent: 2em;">
                            <p style="line-height: 26px;letter-spacing: 2px;margin: 0">
                                <span style="width: 19%;"></span>
                            </p>
                            <div class="button-container" th:if="${''}">
<!--                                <img class="imageStyle" th:src="${''}"  alt="">-->
                            </div>
                            <div th:unless="${studentUrl}">
                                <p style="justify-content: space-between; text-align: right;margin-right: 55px">
                                    <span>学生部门（公章）：</span>
                                </p>

                                <p style="text-align: right;margin-right: 15px;margin: 0"><span th:text="${returnYear}"></span>年<span th:text="${returnMonth}"></span>&ensp;&ensp;月<span th:text="${returnDay}"></span>&ensp;&ensp;日</p>

                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

</div>
</body>

</html>
